import React, { useState } from 'react';
import { Card, Form, Input, Button, Table, Tag, Space, Modal } from 'antd';
import { SearchOutlined, PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './styles.css';

interface SearchFormData {
  username?: string;
  phoneNumber?: string;
  companyName?: string;
  status?: string;
}

// 模拟数据
const mockData = [
  {
    id: 'USER001',
    username: '张三',
    email: 'zhangsan@example.com',
    phoneNumber: '13800138000',
    companyName: '北京科技有限公司',
    companyNumber: '91110000123456789A',
    status: 'enabled',
  },
  {
    id: 'USER002',
    username: '李四',
    email: 'lisi@example.com',
    phoneNumber: '13900139000',
    companyName: '上海科技有限公司',
    companyNumber: '91310000123456789B',
    status: 'disabled',
  }
];

const UserList: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(mockData);
  const navigate = useNavigate();

  const handleSearch = (values: SearchFormData) => {
    setLoading(true);
    // 模拟API请求
    setTimeout(() => {
      setLoading(false);
      console.log('搜索条件:', values);
    }, 500);
  };

  const handleAdd = () => {
    navigate('/global-info/user/add');
  };

  const handleEdit = (record: any) => {
    navigate(`/global-info/user/${record.id}`);
  };

  const handleDelete = (record: any) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除用户"${record.username}"吗？`,
      onOk() {
        console.log('删除用户:', record);
      }
    });
  };

  const columns = [
    {
      title: '基础支撑平台',
      dataIndex: 'platform',
      key: 'platform',
      width: 150,
      render: () => '上海（SH）',

    },
    {
      title: '法人',
      dataIndex: 'username',
      key: 'username',
      width: 120,
      render: (text: string, record: any) => (
        <a onClick={() => handleEdit(record)}>{text}</a>
      )
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      width: 180
    },
    {
      title: '手机号',
      dataIndex: 'phoneNumber',
      key: 'phoneNumber',
      width: 120
    },
    {
      title: '单位名称',
      dataIndex: 'companyName',
      key: 'companyName',
      width: 200
    },
    {
      title: '统一信用代码',
      dataIndex: 'companyNumber',
      key: 'companyNumber',
      width: 180
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => (
        <Tag color={status === 'enabled' ? 'success' : 'error'}>
          {status === 'enabled' ? '启用' : '停用'}
        </Tag>
      )
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_: any, record: any) => (
        <Space size="middle">
          <a onClick={() => handleEdit(record)}>
            <EditOutlined /> 编辑
          </a>
          <a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>
            <DeleteOutlined /> 删除
          </a>
        </Space>
      )
    }
  ];

  return (
    <div className="user-list-container">
      {/* 搜索栏 */}
      <Card className="search-card">
        <Form
          form={form}
          layout="inline"
          onFinish={handleSearch}
          className="search-form"
        >
          <Form.Item name="username" label="用户名">
            <Input placeholder="请输入用户名" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name="phoneNumber" label="手机号">
            <Input placeholder="请输入手机号" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name="companyName" label="单位名称">
            <Input placeholder="请输入单位名称" style={{ width: 200 }} />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>
                搜索
              </Button>
              <Button onClick={() => form.resetFields()}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
        <Table
          columns={columns}
          dataSource={data}
          rowKey="id"
          loading={loading}
          pagination={{
            total: data.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`
          }}
        />
      </Card>
    </div>
  );
};

export default UserList; 